import { Button, Dropdown, Menu } from 'antd'
import { useAuth } from 'context/auth-context'
import React, { useState } from 'react'
import { ProjectList } from 'screens/project-list'
import styled from '@emotion/styled'
import { Row } from 'components/lib'
import { ReactComponent as SoftwareLogo } from 'assets/software-logo.svg'
import { BrowserRouter as Router } from 'react-router-dom'
import { Routes, Route, Navigate } from 'react-router'
import ProjectScreen from './screens/project'
import { resetRoute } from 'utils'
import { ProjectModel } from 'screens/project-list/project-model'
import { ProjectPopover } from 'screens/project-list/project-popover'
import { ButtonNoPadding } from 'components/lib'
export const AuthenticatedApp = () => {
  const [projectModelOpen, setProjectModelOpen] = useState(false)
  return (
    <Container>
      <PageHeader
        projectButton={
          <ButtonNoPadding onClick={() => setProjectModelOpen(true)} type={'link'}>
            创建项目
          </ButtonNoPadding>
        }
      />
      <Main>
        <Router>
          <Routes>
            <Route
              path={'/projects'}
              element={
                <ProjectList
                  projectButton={
                    <ButtonNoPadding onClick={() => setProjectModelOpen(true)} type={'link'}>
                      创建项目
                    </ButtonNoPadding>
                  }
                />
              }
            />
            <Route path={'/projects/:projectId/*'} element={<ProjectScreen />} />
            <Route path={'*'} element={<Navigate to={'/projects'} />} />
            {/* <Navigate to={'/projects'} /> */}
          </Routes>
        </Router>
      </Main>
      <ProjectModel projectModel={projectModelOpen} onChange={() => setProjectModelOpen(false)} />
    </Container>
  )
}

const PageHeader = (props: { projectButton: JSX.Element }) => {
  const { logout, user } = useAuth()

  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <ButtonNoPadding type={'link'} onClick={resetRoute}>
          <SoftwareLogo width={'18rem'} color={'rgb(38,132,255)'} />
        </ButtonNoPadding>
        <ProjectPopover projectButton={props.projectButton} />

        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key={'logout'}>
                <Button type={'link'} onClick={logout}>
                  登出
                </Button>
              </Menu.Item>
            </Menu>
          }
        >
          <Button type={'link'} onClick={e => e.preventDefault()}>
            Hi, {user?.name}
          </Button>
        </Dropdown>
      </HeaderRight>
    </Header>
  )
}

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr 6rem;

  grid-template-areas:
    'header header header'
    'main main main'
    'footer footer footer';
  height: 100vh;
`

// grid-area 用来给grid子元素起名字
const Header = styled(Row)`
  grid-area: header;
  padding: 3.2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`
const HeaderLeft = styled(Row)``
const HeaderRight = styled.div``
const Main = styled.main`
  grid-area: main;
`
